import _ from "lodash";
export const SPAN = "SPAN";
export const XS = "XS";
export const SM = "SM";
export const MD = "MD";
export const LG = "LG";
export const XL = "XL";
export const XXL = "XXL";
export const resizeHandlerArr = {};
let size = SPAN;
let docWidth = 0;
function resizeHandler() {
  docWidth = document.body.clientWidth;

  if (docWidth < 576) {
    size = XS;
  } else if (docWidth >= 576) {
    size = SM;
  } else if (docWidth >= 768) {
    size = MD;
  } else if (docWidth >= 992) {
    size = LG;
  } else if (docWidth >= 1200) {
    size = XL;
  } else if (docWidth >= 1600) {
    size = XXL;
  }
  Object.keys(resizeHandlerArr).forEach(function(key) {
    resizeHandlerArr[key](size, docWidth);
  });
}

resizeHandler();
/**
 * 负责页面宽度检测。减少多次检测
 * @param {*} name
 * @param {*} fn
 */

export const register = function(name, fn) {
  resizeHandlerArr[name] = fn;
  fn(size, docWidth);
};

export const destroy = function(name) {
  delete resizeHandlerArr[name];
};
export const start = function() {
  window.addEventListener("resize", _.debounce(resizeHandler, 150), false);
};
